/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import DragTable from '@/components/DragTable';
import ProTable from '@ant-design/pro-table';
import { inAddwork } from '@/pages/sms/specialTmp/index.d';
import { useSelector } from 'umi';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProForm, { ModalForm, ProFormTextArea } from '@ant-design/pro-form';
import type { ConnectState } from '@/models/connect';
import { getWorkList, deteleWork, addWork } from '@/services/sms/specialTmp';
import { Button, message, Popconfirm, Space } from 'antd';
import styles from './index.less';

interface RefuseModalProps {
  children: JSX.Element;
  tableRef: ActionType | undefined;
}

const RefuseModal: React.FC<RefuseModalProps> = ({ children, tableRef }) => {
  return (
    <ModalForm
      title='添加短信拦截词'
      trigger={children}
      width={540}
      onFinish={async (values: { word: string }) => {
        const { code, msg } = await addWork(values);
        if (code == 0) {
          message.success(msg);
          tableRef?.reload();
          return true;
        }
        message.error(msg);
        return false;
      }}
    >
      <ProForm.Group>
        <ProFormTextArea
          width='xl'
          name='word'
          placeholder='请输入拦截词'
          rules={[{ required: true, message: '请输入拦截词' }]}
          allowClear
          fieldProps={{
            rows: 4,
            maxLength: 20,
          }}
        />
      </ProForm.Group>
    </ModalForm>
  );
};

const Index: React.FC = () => {
  const { winSize } = useSelector((state: ConnectState) => state.global);
  const actionRef = useRef<ActionType>();
  const handleRequest = async (params: any) => {
    const { current: page, pageSize: limit } = params;
    return getWorkList({ page, limit });
  };
  const handleClick = async (id: string) => {
    const { code, msg } = await deteleWork({ id });
    if (code == 0) {
      actionRef.current?.reload();
      message.success('操作成功');
      return;
    }
    message.error(msg);
  };
  const columns: ProColumns<inAddwork>[] = [
    {
      title: '拦截词',
      dataIndex: 'sensitive_words',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      title: '创建人',
      dataIndex: 'admin_name',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'options',
      align: 'center',
      search: false,
      ellipsis: true,
      width: winSize === 'xs' ? 80 : 230,
      fixed: 'right',
      render: (_: any, record: inAddwork) => {
        return (
          <Space direction={winSize === 'xs' ? 'vertical' : 'horizontal'}>
            <Popconfirm
              title='你确定删除当前拦截词吗？'
              onConfirm={handleClick.bind(this, record.id, 'approved')}
              key='approved'
            >
              <a>删除</a>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];
  return (
    <PageContainer>
      <DragTable>
        <ProTable<inAddwork>
          className={styles.main}
          actionRef={actionRef}
          rowKey='tid'
          request={handleRequest}
          columns={columns}
          pagination={{
            pageSize: 30,
            showQuickJumper: false,
            showSizeChanger: false,
          }}
          scroll={{ x: 640 }}
          options={false}
          search={{
            collapsed: false,
            optionRender: () => [
              <RefuseModal key='refuse' tableRef={actionRef.current}>
                <Button type='primary'>添加拦截词</Button>
              </RefuseModal>,
            ],
          }}
        />
      </DragTable>
    </PageContainer>
  );
};

export default Index;
